<!--
*@Author: QWP
*@Description: 卡片
*@Date: 2023-06-20 10:49:51
-->
<template>
  <a-card
    v-bind="$attrs"
    :headStyle="headStyle"
    :bodyStyle="bodyStyle"
    :bordered="false"
    class="u-custom-busi-card"
    :class="{'u-card-no-title': !$attrs['title']}">
    <template #extra>
      <slot name="extra"></slot>
    </template>
    <slot></slot>
  </a-card>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
defineOptions({
  name: 'u-busi-card'
})

const headStyle = {
  minHeight: '46px',
  padding: "0 16px",
  borderBottom: 'unset'
}

const bodyStyle = {
  padding: "0 16px"
}

</script>

<style lang="scss">
.u-custom-busi-card {
  box-shadow: unset !important;
  .ant-card-head-title {
    position: relative;
    padding-left: 12px;
    &::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      width: 3px;
      height: 75%;
      background: #1890FF;
      border-radius: 0px 0px 0px 0px;
    }
  }
}
.u-custom-busi-card.f-h-100{
  .ant-card-body {
    height: calc(100% - 47px)
  }
}
.u-card-no-title.f-h-100{
  .ant-card-body {
    height: 100%
  }
}
</style>